<template>
    
    <!-- 组件的模板 -->
    <div class="page">
        <div class="mod-user">
            <a class="flex mod-access bg-color touch" href="javascript:;" @click="gotoKaoqinPersonal(per_data.user_id)">
                <img class="avatar" v-if="per_data.logo.thumb_url" :src="per_data.logo.thumb_url" alt="">
                <img class="avatar" v-else src="../../static/imgs/avatar.png" alt="">
                <div class="c1">
                    <span class="name">{{per_data.user_name}}</span>
                    <span class="team">{{per_data.group_name}}</span>
                </div>
                <div class="c2">
                    <span class="title">出勤情况:</span>
                    <p class="day" v-if="base_wage_unit == 0"><span class="s1">{{per_data.normal_days}}天正常</span><span class="s2">{{per_data.abnormal_days}}天异常</span></p>
                    <p class="day" v-else><span class="s1">{{per_data.total_time}}个小时</span></p>
                </div>
            </a>
        </div>
        <div class="weui-cells__title">工资明细</div>
        <div class="weui-cells weui-cells_form">
            <div class="weui-cell">
                <div class="weui-cell__hd"><label class="weui-label title">基本工资</label></div>
                <div class="weui-cell__bd">
                    <input class="weui-input money" type="number" placeholder="请输入" v-model="per_data.base_wage">
                </div>
            </div>
            <template v-for="item in per_data.extra_pay">
                <div class="weui-cell" v-if="item.select == 1">
                    <div class="weui-cell__hd"><label class="weui-label title">{{item.name}}</label></div>
                    <div class="weui-cell__bd">
                        <input class="weui-input money" type="number" placeholder="选填" v-model="item.value">
                    </div>
                </div>
            </template>
            
            <!-- <div class="weui-cell">
                <div class="weui-cell__hd"><label class="weui-label title">加班费</label></div>
                <div class="weui-cell__bd">
                    <input class="weui-input money" type="text" placeholder="请输入" value="+20">
                </div>
            </div>
            <div class="weui-cell">
                <div class="weui-cell__hd"><label class="weui-label title">扣费</label></div>
                <div class="weui-cell__bd">
                    <input class="weui-input money" type="text" placeholder="请输入" value="-10">
                </div>
            </div> -->
            <p class="total com-border-top com-border-bottom">合计：<em>{{per_data.bar_total_wage}}</em></p>
        </div>
        <div class="weui-cells__title">备注信息</div>
        <div class="weui-cells weui-cells_form">
            <div class="weui-cell">
                <div class="weui-cell__bd">
                    <textarea class="weui-textarea" placeholder="请输入" rows="3" v-model="per_data.remark" maxlength="100"></textarea>                    
                </div>
            </div>
        </div>
        <template v-if="showEvaluation">
            <div class="weui-cells__title">评价</div>
            <div class="weui-cells weui-cells_form" style="margin-bottom: 12px;" v-if="evaluation_data.star_level == 0">
                <div class="evaluation">
                    <div class="evaluation_img" :class="{'evaluation_style1': evaluation_data.star_level == 1,'evaluation_style2': evaluation_data.star_level == 2,'evaluation_style3': evaluation_data.star_level == 3,'evaluation_style4': evaluation_data.star_level == 4,'evaluation_style5': evaluation_data.star_level == 5}"><span class="star1" @click="gotoEvaluation(1)"></span><span class="star2" @click="gotoEvaluation(2)"></span><span class="star3" @click="gotoEvaluation(3)"></span><span class="star4" @click="gotoEvaluation(4)"></span><span class="star5" @click="gotoEvaluation(5)"></span></div>
                    <div class="evaluation_text">
                        <p v-if="evaluation_data.prompt">{{evaluation_data.prompt}}</p>
                        <p v-else>填写评价，吐槽或者鼓励一下~</p>
                    </div>
                </div>
            </div>
            <div class="weui-cells weui-cells_form" style="margin-bottom: 12px;" v-else @click="gotoEvaluation(evaluation_data.star_level)">
                <div class="evaluation">
                    <div class="evaluation_img" :class="{'evaluation_style1': evaluation_data.star_level == 1,'evaluation_style2': evaluation_data.star_level == 2,'evaluation_style3': evaluation_data.star_level == 3,'evaluation_style4': evaluation_data.star_level == 4,'evaluation_style5': evaluation_data.star_level == 5}"><span class="star1"></span><span class="star2"></span><span class="star3"></span><span class="star4"></span><span class="star5"></span></div>
                    <div class="evaluation_text">
                        <p v-if="evaluation_data.prompt">{{evaluation_data.prompt}}</p>
                        <p v-else>填写评价，吐槽或者鼓励一下~</p>
                    </div>
                </div>
            </div>
        </template>
    </div>
</template>

<script>
    /**
     *  引入工具类库 或 Native API
     *  example : import widget from 'gapi/widget'
     */
    import * as util from 'js/util.js'
    import commonPage from 'clientApi/commonPage.js'
    import teamApi from 'clientApi/teamApi.js'
    import cache from 'gapi/cache.js'
    import widget from 'gapi/widget'
    import KCApiApp from 'clientApi/KCApiApp.js'
    /**
     *  引入组件 以及 组件接口(Action)
     *  example : import Somecomponents from 'components/Somecomponents/Somecomponents'
     */

    /**
     *  组件实例对象
     */
    export default {
        components: {

        },
        data: function(){
            return{
                team_id: 0,
                project_id: 0,
                date: '',
                base_wage_unit: 0,
                per_data:  {
                    "user_id": 0,
                    "user_name": "",
                    "group_name": "",
                    "logo": {
                        "url": "",
                        "thumb_url": ""
                    },
                    "normal_days": 0, //正常考勤天数
                    "abnormal_days": 0,//异常考勤天数
                    "total_time": 0,//总工时
                    "base_wage": '',
                    "extra_pay": [],
                    "bar_total_wage": 0,
                    "remark": ""
                },
                evaluation_data: {},
                evaluation_tag: [],     
                showEvaluation: false,//是否展示评价入口
                // showSubmitevaluation: false,//是否允许提交评价  
                transition: {
                    star_level: '',
                    tag: [],
                    evaluate: ''
                },//评价过渡数据
                begin_remark: '',//获取来的备注

            }
        },
        vuex: {
            getters: {

            },
            actions: {

            }
        },
        methods: {
            /**
             * 初始化
             * @method init
             * @public
             * @return {Null} void
             */
            init (){
                

                cache.getCache('KqCacheMessge', (data) => {
                    console.log(data)
                    this.team_id = data.team_id
                    this.project_id = data.project_id
                })

                cache.getCache('PayEditPerDetailParam', (data) => {
                    console.log(data)
                    if(data){
                        this.date = data.date
                        this.base_wage_unit = data.base_wage_unit
                        this.per_data = data.wage_bar
                        this.per_data.base_wage = this.per_data.base_wage == 0 ? '' : this.per_data.base_wage/100
                        this.per_data.bar_total_wage = this.per_data.bar_total_wage/100
                        this.begin_remark = data.wage_bar.remark
                        let tempArr = []
                        this.per_data.extra_pay.forEach((obj) => {
                            if(obj.value == 0){
                                obj.value = ''
                            }else{
                                obj.value = obj.value/100
                            }
                            tempArr.push(obj)
                        })
                        this.per_data.extra_pay = tempArr
                        this.doWatch()
                    }
                    
                })
                //获取权限
                // this.getPermission()
               
                
            },
            doWatch(){
                this.$watch('per_data.extra_pay', (newV, oldV) => {
                    // console.log(newV)
                    let total_wage = 0
                    this.per_data.extra_pay.forEach((obj) => {
                        if(!isNaN(Number(obj.value))){
                            total_wage += Number(obj.value)*Number(obj.flag)
                        }
                    })
                    this.per_data.bar_total_wage = (total_wage + Number(this.per_data.base_wage)).toFixed(2)
                }, {deep: true})

                this.$watch('per_data.base_wage', (newV, oldV) => {
                    // console.log(newV)
                    // if(!isNaN(Number(newV)) && !isNaN(Number(oldV))){
                    //     this.per_data.bar_total_wage += Number(newV) - Number(oldV)
                    // }
                    let total_wage = 0
                    this.per_data.extra_pay.forEach((obj) => {
                        if(!isNaN(Number(obj.value))){
                            total_wage += Number(obj.value)*Number(obj.flag)
                        }
                    })
                    this.per_data.bar_total_wage = (total_wage + Number(this.per_data.base_wage)).toFixed(2)
                }, {deep: true})
                //获取评价
                this.receiveEvaluation()
            },
            doSubmit(){
                if(this.per_data.base_wage > 1000000){
                    widget.toast('输入金额不能超过100万')
                    return
                }
                for(let i = 0; i < this.per_data.extra_pay.length;i ++){
                    if(this.per_data.extra_pay[i].value > 1000000){
                        widget.toast('输入金额不能超过100万')
                        return
                    }
                }
                if(this.per_data.bar_total_wage < 0){
                    widget.toast('扣款金额不能超过工资总金额')
                    return
                }
                this.per_data.base_wage = this.per_data.base_wage === '' ? 0 : Math.round(this.per_data.base_wage*100)
                this.per_data.bar_total_wage = Math.round(this.per_data.bar_total_wage*100)
                let tempArr = []
                this.per_data.extra_pay.forEach((obj) => {
                    if(obj.value === ''){
                        obj.value = 0
                    }else{
                        obj.value = Math.round(obj.value*100)
                    }
                    tempArr.push(obj)
                })
                this.per_data.extra_pay = tempArr
                // console.log(JSON.stringify(this.per_data))
                if(this.per_data.remark != this.begin_remark){
                    //埋点
                    let statisticsLog_data = {
                        event_id: '编辑人员工资-备注',
                        // event_label: data.event_label,(预留，现在不用传此参数)
                        event_param: {
                            ca_from: 'remark',
                            project_id: this.project_id,
                        }
                    }
                    // alert(JSON.stringify(statisticsLog_data))
                    KCApiApp.statisticsLog(statisticsLog_data)
                }
                //埋点
                let statisticsLog_data = {
                    event_id: '编辑人员工资-完成',
                    // event_label: data.event_label,(预留，现在不用传此参数)
                    event_param: {
                        ca_from: 'done',
                        project_id: this.project_id,
                    }
                }
                // alert(JSON.stringify(statisticsLog_data))
                KCApiApp.statisticsLog(statisticsLog_data)
                commonPage.goBack(1,{key: 'OPERATION_FORM_EDIT',value: this.per_data})
                
            },
            gotoKaoqinPersonal(id){
                //埋点
                let statisticsLog_data = {
                    event_id: '编辑人员工资-查看出勤（头像位置）',
                    // event_label: data.event_label,(预留，现在不用传此参数)
                    event_param: {
                        ca_from: 'checkattendance',
                        project_id: this.project_id,
                    }
                }
                // alert(JSON.stringify(statisticsLog_data))
                KCApiApp.statisticsLog(statisticsLog_data)

                let str = encodeURIComponent(`date=${this.date}&user_id=${id}&team_id=${this.team_id}&project_id=${this.project_id}&origin=listbystatus`)
                window.location.href="dmsaas://KaoqinPersonal?urdData="+str
            },
            //获取评价
            receiveEvaluation(){
                console.log(1 + JSON.stringify({
                        team_id: this.team_id,
                        project_id: this.project_id,
                        user_id: this.per_data.user_id
                    }))
                util.ajax({
                    url:'/comment/get',
                    type:'GET',
                    data:{
                        team_id: this.team_id,
                        project_id: this.project_id,
                        user_id: this.per_data.user_id
                    },
                    timeout:10000,
                    success:(obj) => {
                        console.log(this.team_id,this.project_id,this.per_data.user_id)
                        console.log("获取评价信息"+JSON.stringify(obj))
                        if(obj&&obj.errno == 0){
                            this.showEvaluation = true
                            this.evaluation_data = obj.data
                            this.evaluation_data.star_data.forEach( (obj) => {
                              if(obj.star == this.evaluation_data.star_level){
                                this.evaluation_data.prompt = obj.prompt
                              }
                            })
                        }else if(obj.errno == 4){
                            this.showEvaluation = false
                        }else{
                            this.showEvaluation = true
                            widget.toast(obj.errmsg)
                        }
                    },
                    error: (xhr, status) => {
                        widget.toast('网络连接失败，请检查网络')
                    },
                    noNetwork: () => {
                        widget.toast('网络连接失败，请检查网络')
                    }
                })
            },
            //提交评价
            submitEvaluation(){   
            console.log("提交")            
                util.ajax({
                    url:'/comment/submit',
                    type:'POST',
                    data:{
                        team_id: this.team_id,
                        project_id: this.project_id,
                        user_id: this.per_data.user_id,
                        star: this.evaluation_data.star_level,
                        tag: this.evaluation_tag,
                        evaluate: this.evaluation_data.evaluate,
                        source: 2
                    },
                    timeout:10000,
                    success:(obj) => {
                        console.log("提交评价结果"+JSON.stringify(obj))
                        if(obj&&obj.errno == 0){
                            //埋点
                            let statisticsLog_data = {
                                event_id: '编辑人员工资-提交评价',
                                // event_label: data.event_label,(预留，现在不用传此参数)
                                event_param: {
                                    ca_from: 'submit',
                                    project_id: this.project_id,
                                }
                            }
                            // alert(JSON.stringify(statisticsLog_data))
                            KCApiApp.statisticsLog(statisticsLog_data)

                            this.receiveEvaluation()
                        }else{
                            widget.toast(obj.errmsg)
                        }
                    },
                    error: (xhr, status) => {
                        widget.toast('网络连接失败，请检查网络')
                    },
                    noNetwork: () => {
                        widget.toast('网络连接失败，请检查网络')
                    }
                })
            },
            gotoEvaluation(star_level){
                    //埋点
                    let statisticsLog_data = {
                        event_id: '编辑人员工资-评价',
                        // event_label: data.event_label,(预留，现在不用传此参数)
                        event_param: {
                            ca_from: 'evalute',
                            project_id: this.project_id,
                        }
                    }
                    // alert(JSON.stringify(statisticsLog_data))
                    KCApiApp.statisticsLog(statisticsLog_data)

                // if(this.showSubmitevaluation){
                    this.evaluation_data.star_level = star_level
                    console.log("调取评价传的参数"+JSON.stringify(this.evaluation_data))
                    teamApi.showEvaluation(this.evaluation_data, (data) => {
                        console.log(JSON.stringify(data))
                        if(data.star_level){             
                            this.evaluation_data.star_level = data.star_level
                            this.evaluation_tag = data.tag                     
                            this.evaluation_data.evaluate = data.evaluate
                            this.submitEvaluation()
                        }else{
                            // this.evaluation_data.star_level = this.evaluation_data.star_level
                            // this.evaluation_tag = this.evaluation_tag                  
                            // this.evaluation_data.evaluate = this.evaluation_data.evaluate
                            this.receiveEvaluation();                            
                        }
                        // this.transition.star_level = data.star_level
                        // this.transition.tag = data.tag   
                        // this.transition.evaluate = data.evaluate
                        

                    })
                // }else{
                //     widget.toast('项目已结束不能执行此操作')
                // }
                
                
            },
            // 获取权限
            getPermission(){
                let getEvaluation = 'get_comment',//获取评价
                    submitEvaluation = 'submit_comment'//提交评价
                util.ajax({
                    url: '/permission/application',
                    data: {
                        team_id: this.team_id,
                        project_id: this.project_id,
                        application_id: 0
                    },
                    success: (res) => {
                      // alert(222)
                       console.log("权限"+JSON.stringify(res))
                        if(res.errno == 0){     
                            let permissionData = res                 
                            //查看评价权限
                            // this.showEvaluation = permissionData.data.some((o, i, a) => {
                            //     if(o.id_name == getEvaluation){
                            //         return true
                            //     }
                            // })
                            //提交评价权限
                            // this.showSubmitevaluation = permissionData.data.some((o, i, a) => {
                            //     if(o.id_name == submitEvaluation){
                            //         return true
                            //     }
                            // })
                        }else{
                            widget.toast(res.errmsg)
                        }

                        if(this.isEmploee){
                            // 有权限采取获取 员工统计数据
                            this.getEeData()
                        }
                        commonPage.loadPageStatus('loadSuccess')
                    },
                    error: (xhr, error) => {
                        widget.toast('服务器异常')
                        commonPage.loadPageStatus('loadSuccess')
                    }
                })
            }
        },
        created(){

            this.init();
            
            commonPage.updateTitleBar({
                // backAction: 'checkChange',    // 点击返回按钮的动作（即回调函数名称）
                // leftDisplay: false,            // 是否显示左按钮
                // leftText: '',                // 左按钮文案
                // leftAction: 'checkChange',    // 点击左按钮的动作（即回调函数名称）
                rightDisplay: true,            // 是否显示右按钮
                rightText: '完成',            // 右按钮文案
                rightAction: 'doSubmit'    // 点击右按钮的文案（即回调函数名称）
            })
            window.doSubmit = this.doSubmit
        },
        ready(){
            setTimeout(() => {
                $('.money').on('textInput',(event) => {
                    console.log(event)
                    if(event.data == 0 || event.data == 1 || event.data == 2 || event.data == 3 || event.data == 4 || event.data == 5 || event.data == 6 || event.data == 7 || event.data == 8 || event.data == 9){

                        // console.log(event.data)
                        if(event.target.value == '' && event.data == 0){
                            event.preventDefault()
                        }
                        if(event.target.value.indexOf('.') > -1 && event.target.value.length >= event.target.value.indexOf('.')+3){
                            event.preventDefault()
                        }

                    }else if(event.data == '.'){
                        if(event.target.value.indexOf('.') > -1 || event.target.value == ''){
                            event.preventDefault()
                        }
                        // console.log(event.target.value)
                    }else{
                        event.preventDefault()
                    }
                })
            },100)
            
        }
        
    }

    
</script>

<!-- CSS 样式 -->
<style src="../../node_modules/weui/dist/style/weui.css"></style>
<style src="../../static/css/common.css"></style>
<style src="../../static/css/salary.css"></style>
<style src="../../static/css/evaluation.css"></style>



